<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ztree demo</title>

    <!-- <link rel="stylesheet" href="../static/ztree/css/zTreeStyle.css" type="text/css"> -->
    <link rel="stylesheet" href="../static/ztree/css/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="../static/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../static/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../static/ztree/js/jquery.ztree.excheck.js"></script>
</head>

<body>
    <ul id="treeDemo" class="ztree"></ul>
</body>
<script type="text/javascript">
    $(function () {
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true,
                    // 自定义父节点key名称。很关键，很坑，接口返回pId有时会无效
                    pIdKey: "parentId"
                }
            },
            view: {
                fontCss: getFont,
                nameIsHTML: true
            }
        };
        var zNodes = [
            { id: 1, parentId: 0, name: "随意勾选 1", open: true, font: { 'background-color': '#999', 'color': 'white' } },
            { id: 11, parentId: 1, name: "随意勾选 1-1", open: true },
            { id: 111, pId: 11, name: "随意勾选 1-1-1", chkDisabled: true },
            { id: 112, pId: 11, name: "随意勾选 1-1-2" },
            { id: 12, pId: 1, name: "随意勾选 1-2", open: true },
            { id: 121, pId: 12, name: "随意勾选 1-2-1" },
            { id: 122, pId: 12, name: "随意勾选 1-2-2" },
            { id: 2, pId: 0, name: "随意勾选 2", checked: true, open: true },
            { id: 21, pId: 2, name: "随意勾选 2-1" },
            { id: 22, pId: 2, name: "随意勾选 2-2", open: true },
            { id: 221, pId: 22, name: "随意勾选 2-2-1", checked: true },
            { id: 222, pId: 22, name: "随意勾选 2-2-2" },
            { id: 23, pId: 2, name: "随意勾选 2-3" }
        ];
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

    function getFont(treeId, node) {
        return node.font ? node.font : {};
    }
</script>

</html>